import React from 'react';

// 有状态组件 class

export class Counter extends React.Component {
  // 1 constructor
  // constructor(){
  //   super()
  //   this.state = {
  //     count: 0
  //   }
  // }
  // 2 类的实例公有字段
  state = {
    count: 0,
    // 数组，动态渲染按钮
    buttons: [
      { id: 1, add: 1 },
      { id: 2, add: 2 },
      { id: 3, add: 3 },
    ],
  };

  // 类的公有实例字段
  handleCount = () => {
    // this.state.count = 10; // 只改变数据，没有通知React更新页面
    // 修改组件状态，通知页面更新
    this.setState({
      // count: this.state.count++, // 先参与运算 再自增
      // count: ++this.state.count, // 先自增，再参与运算
      count: this.state.count + 2,
    });
    // console.log(this.state.count);
  };

  // 多个按钮
  handleButton = (add, e) => {
    console.log(add, e);
    this.setState({
      count: this.state.count + add,
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleCount}>按钮</button>
        <br />
        {this.state.buttons.map((item) => (
          <button key={item.id} onClick={(e) => this.handleButton(item.add, e)}>
            按钮{item.add}
          </button>
        ))}
      </div>
    );
  }
}
